<template>
	<view class="content">
		<view class="title-wrap">
			<text>欢迎登录智慧工会平台</text>
			<text>仅限彩虹权益相应组织内会员登录</text>
		</view>
		<view class="login-logo">
			<up-image :src="bg" width="486rpx" height="440rpx"></up-image>
		</view>
		<view class="agreement">
			<up-checkbox
				:customStyle="{marginTop: '30rpx'}"
				name="agree"
				usedAlone
				shape="circle"
				active-color="#ff0000"
				@change="handleCheckboxChange">
				<template #label>
					<text class="common">我已阅读并同意</text>
					<text class="highlight" @tap.stop="getUserAgreement">《用户服务协议》</text>
					<text class="common">和</text>
					<text class="highlight" @tap.stop="getPrivacyAgreement">《隐私政策》</text>
				</template>
			</up-checkbox>
		</view>
		
		<view class="login-btn">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="getPhoneNumber" :class="loginDisabled ? 'disable-btn':'btn'" :disabled="loginDisabled" @getphonenumber="getPhoneNumber">一键登录</button>
			<view class="noLogin" @click="goHome">暂不登录 我先看看</view>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<button :class="loginDisabled ? 'disable-btn':'btn'" :disabled="loginDisabled" @tap="loginByH5">一键登录</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import bg from '@/static/images/login/bg.png'
	import logo from '@/static/images/logo.png'
	import { wxLogin,showConfirm  } from '@/utils/common';
	import { loginApi } from '../../api/login/login-api';
	export default {
		data(){
			return {
				loginDisabled: true,
				bg:'https://jqgh-public.yqfoodec.com/20250415/login-logo_73188.png',
				logo,
				isAgree: false, // 初始状态为未选中
				wechatPublicCode: '', // 微信公众code
				options: {},
				
			}
		},
		onLoad(options) {
			this.options = options
			// #ifdef H5
			this.loginByH5();
			// #endif

		},
		methods:{
			nav2VerifyCode(){
				uni.navigateTo({
					url:'/pages/user/login'
				})
			},
			handleCheckboxChange(event) {
				this.isAgree = event;
				this.loginDisabled = !event;
			},
			//小程序授权手机号登陆
			async getPhoneNumber(e){
				if(!this.isAgree){
					uni.showToast({
						icon: 'error',
						title: '请阅读并同意《用户服务协议》、《隐私政策》',
					});
					return;
				}
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					const loginCode = await wxLogin();
					const { code } = e.detail;
					const formData = {authPhoneCode:code,loginCode:loginCode};
					this.login(formData);
				}else {
					uni.showToast({
					  title: '你拒绝了授权，无法获取手机号',
					  icon: 'error'
					});
				}
			},
			goHome() {
				uni.switchTab({ url: '/pages/index/index' });
			},
			//h5端登陆
			async loginByH5(){
				const app = getApp();
				const userInfo = app.globalData.currentUser;
				const formData = {memberPhone:userInfo.memberPhone,unionId:userInfo.unionid}
				this.login(formData);
			},
			//调用登录接口
			async login(formData){
				uni.showLoading({ title: '登录中' });
				//const loginCode = await wxLogin();
				this.$store.dispatch('Login', formData).then(res => {
					uni.hideLoading();
					this.loginSuccess();
				}).catch((error) => {
					uni.showToast({icon: 'none',title: error,duration:3000});
				})
			},
			//登陆成功后跳转
			loginSuccess(result){
				this.$store.dispatch('GetInfo').then(res => {
					if(!res.data.orgId){
						uni.showToast({
							title:'当前账号工会组织不存在',
							duration: 1000
						})
					}
					// #ifdef H5
					uni.reLaunch({ url: '/brisk-walking/index?type=1' });
					// #endif
					
					// #ifdef MP-WEIXIN
					uni.switchTab({ url: '/pages/mine/index' });
					// #endif
				})
			},
			// 用户协议
			getUserAgreement() {
				uni.navigateTo({
					url: `/brisk-walking/activityRules?type=4`
				})
			},
			// 隐私协议
			getPrivacyAgreement() {
				uni.navigateTo({
					url: `/brisk-walking/activityRules?type=5`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	  height: 100vh;
	  width: 100vw;
	  background-color: #fff;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.title-wrap{
		margin-top: 120px;
		display: flex;
		flex-direction: column;
		padding: 20rpx 40rpx;
		text:first-child {
			font-family: AlibabaPuHuiTi;
			font-size: 24px;
			font-weight: 500;
			line-height: normal;
		}
		text:last-child{
			margin-top: 16rpx;
			font-size: 14px;
			color:#9E9E9E;
		}
			
	}
	.login-logo {
		display: flex;
		justify-content: center;
	}

	.login-btn{
	  margin: 30rpx 40rpx 30rpx 40rpx;
	  .btn{
		  background-color: rgba(246, 0, 0, 1);
		  color:#fff;
		  border-radius: 50rpx;
	  }
	  .disable-btn{
		  background-color: #ccc;
		  color:#fff;
		  border-radius: 50rpx;
	  }
	  .noLogin {
		  line-height: 46px;
		  color: #333;
		  text-align: center;
	  }
	}

	.agreement{
		margin: 0 40rpx;
	}
	.common {
		font-size: 28rpx;
		color: $uni-text-color-grey;
	}
	.highlight {
		font-size: 28rpx;
		color: red;
	}
	.mobile-login-link{
	  color: $uni-color-info;
	  font-size: 14px;
	  margin-top: 150px;
	  text-align: center;
	}
</style>